<script lang="ts" setup>
import { ref } from 'vue'
import xlkTabBar from "../components/tab-bar.vue"

const categories1 = ref([
    { icon: '', label: '早教' },
    { icon: '', label: '幼儿园' },
    { icon: '', label: '音乐' },
    { icon: '', label: '舞蹈' },
    { icon: '', label: '美术' },
])

const categories2 = ref([
    { icon: '', label: '健身' },
    { icon: '', label: '跆拳道' },
])
</script>

<template>
    <umrp-page bg-color="linear-gradient(to bottom, #1890ff30 0% , #1890ff10 20%, #1890ff10 20%,#fff 100%)">
        <umrp-title-bar>
            <umrp-text bold>必学榜</umrp-text>
            <umrp-input-search></umrp-input-search>
        </umrp-title-bar>
        <umrp-container padding="0 10px" :gap="6">
            <umrp-carousel>
                <umrp-carousel-item>
                    <umrp-image :height="60"></umrp-image>
                </umrp-carousel-item>
            </umrp-carousel>
            <umrp-card :border="false">
                <template #body>
                    <umrp-carousel :indicator-offset="{ bottom: 5 }">
                        <umrp-carousel-item>
                            <umrp-container padding="10px 0 10px 0" :height="80">
                                <umrp-grid :cols="5" :col-gap="10" :row-gap="10">
                                    <umrp-grid-item v-for="(category, index) in categories1" :key="index">
                                        <umrp-text-icon>{{ category.label }}</umrp-text-icon>
                                    </umrp-grid-item>
                                </umrp-grid>
                            </umrp-container>
                        </umrp-carousel-item>
                        <umrp-carousel-item>
                            <umrp-container padding="10px 0 10px 0" :height="80">
                                <umrp-grid :cols="5" :col-gap="10" :row-gap="10">
                                    <umrp-grid-item v-for="(category, index) in categories2" :key="index">
                                        <umrp-text-icon>{{ category.label }}</umrp-text-icon>
                                    </umrp-grid-item>
                                </umrp-grid>
                            </umrp-container>
                        </umrp-carousel-item>
                    </umrp-carousel>
                </template>
            </umrp-card>
            <umrp-carousel>
                <umrp-carousel-item>
                    <umrp-image :height="60"></umrp-image>
                </umrp-carousel-item>
            </umrp-carousel>
            <umrp-card :border="false" v-for="key in 10">
                <template #body>
                    <umrp-container direction="horizonal" :gap="6" padding="10px">
                        <div>
                            <umrp-text v-if="key > 3">{{ key }}</umrp-text>
                            <umrp-icon v-if="key <= 3" name="crown" :size="16"></umrp-icon>
                        </div>
                        <umrp-container :gap="6" :width="200" align="start" justify="between">
                            <umrp-media :coverProps="{ width: 50, height: 50 }">
                                <template #cover>
                                    <umrp-badge>
                                        <template #content>
                                            <umrp-label padding="2px 4px" :size="8">必学榜</umrp-label>
                                        </template>
                                        <umrp-image :width="50" :height="50"></umrp-image>
                                    </umrp-badge>
                                </template>
                                <umrp-container :gap="6" align="start">
                                    <umrp-text :size="12" bold>卓越教育（华师店）</umrp-text>
                                    <umrp-text :size="12">必学评分：4.9分</umrp-text>
                                    <umrp-text :size="12">报读人数：10000+</umrp-text>
                                    <umrp-text :size="12">距离：2.1km</umrp-text>
                                </umrp-container>
                            </umrp-media>
                            <umrp-space :size="6">
                                <umrp-label padding="2px 4px" :size="10">到店</umrp-label>
                                <umrp-label padding="2px 4px" :size="10">2025年入围必学榜</umrp-label>
                            </umrp-space>
                        </umrp-container>
                        <umrp-container :width="170" style="overflow-x: scroll;overflow-y: hidden;">
                            <umrp-row :gutter="6" style="width:260px">
                                <umrp-col :span="6" v-for="_ in 3">
                                    <umrp-container :gap="6" direction="vertical">
                                        <umrp-image width="100%" :height="50"></umrp-image>
                                        <umrp-text :size="10">幼儿英语教育（6-12）岁</umrp-text>
                                        <umrp-space :size="6">
                                            <umrp-text :size="10" color="red">￥99</umrp-text>
                                            <umrp-text :size="10" color="#333" through>￥99</umrp-text>
                                        </umrp-space>
                                    </umrp-container>
                                </umrp-col>
                            </umrp-row>
                        </umrp-container>
                    </umrp-container>
                </template>
            </umrp-card>
        </umrp-container>
        <xlk-tab-bar />
    </umrp-page>
</template>